<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>月下仙连 - 个人介绍</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="js/darkmode.js"></script>
    <script src="js/dailyLife.js"></script>
</head>
<body>
<!-- 导航 -->
<header class="header">
    <div class="logo">
        <h3>月下仙连的个人网页</h3>
    </div>
    <nav class="nav">
        <a href="index.html"><i class="fas fa-home"></i> 首页</a>
        <a class="active" href="about.html"><i class="fas fa-user"></i> 个人介绍</a>
        <a href="offering.html"><i class="fas fa-briefcase"></i> 个人作品</a>
        <a href="dailyLife.html"><i class="fas fa-camera"></i> 日常生活</a>
        <a href="contactMe.html"><i class="fas fa-envelope"></i> 联系我</a>
        <button class="mode-toggle" onclick="toggleDarkMode()">
            <i class="fas fa-moon"></i>
        </button>
    </nav>
</header>

<!-- 内容区域 -->
<div class="snow-container">
    <main class="about">
        <div class="about-info">
            <!-- 个人信息 -->
            <section class="about-section">
                <h3 class="about-title"><i class="fas fa-id-card"></i> 个人信息</h3>
                <div class="about-con">
                    <div class="about-text1">
                        <p><i class="fas fa-signature"></i> 姓名：仙连</p>
                        <p><i class="fas fa-venus-mars"></i> 性别：男</p>
                        <p><i class="fas fa-birthday-cake"></i> 年龄：18</p>
                        <p><i class="fas fa-users"></i> 班级：230719</p>
                    </div>
                    <div class="about-img">
                        <img alt="个人照片" src="img/me2.jpg">
                        <img alt="生活照" src="img/me3.jpg">
                        <a href=""><img alt="" src=""></a>
                        <!-- 插入 Bilibili、GitHub 和 TikTok 图标 -->
                        <div class="social-icons">
                            <a href="https://space.bilibili.com/327378574?spm_id_from=333.1007.0.0" target="_blank">
                                <img alt="Bilibili" src="img/bilibili.png" title="Bilibili">
                            </a>
                            <a href="https://github.com/yeoiing" target="_blank">
                                <img alt="GitHub" src="img/github.png" title="GitHub">
                            </a>
                            <a href="https://www.douyin.com/user/self?showTab=like" target="_blank">
                                <img alt="TikTok" src="img/tik_tok.png" title="TikTok">
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 个人爱好 -->
            <section class="about-section">
                <h3 class="about-title"><i class="fas fa-heart"></i> 个人爱好</h3>
                <div class="about-text2">
                    <span><i class="fas fa-gamepad"></i> 游戏</span>
                    <span><i class="fas fa-running"></i> 运动</span>
                    <span><i class="fas fa-plane"></i> 旅行</span>
                    <span><i class="fas fa-music"></i> 音乐</span>
                    <span><i class="fas fa-film"></i> 动漫</span>
                </div>
            </section>

            <!-- 个人技能 -->
            <section class="about-section">
                <h3 class="about-title"><i class="fas fa-code"></i> 个人技能</h3>
                <div class="about-text3">
                    <img alt="C语言" src="img/c.png" title="C语言">
                    <img alt="Java" src="img/java.png" title="Java">
                    <img alt="HTML" src="img/html.png" title="HTML">
                    <img alt="CSS" src="img/css.png" title="CSS">
                    <img alt="JavaScript" src="img/js.png" title="JavaScript">
                </div>
            </section>
        </div>
    </main>
</div>

<!-- 底部 -->
<footer class="footer">
    <p>Copyright © 2020-
        <script>document.write(new Date().getFullYear())</script>
        月下仙连. All rights reserved.
    </p>
</footer>
</body>
</html>
